<template>
    <div class="deposit">
      <!--S选择提现状态-->
      <div id="select-status">
        提现状态：
        <Select
          class="select-status"
          v-model="status"
          @on-change="selectChange"
        >
          <Option
            v-for="item in status_options"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
        <Button
          class="all-deposit-button"
          type="success"
          @click="depositAll"
           >
          批量提现
        </Button>
      </div>
      <!--E选择提现状态-->

      <Table
        border
        :columns="th"
        :data="td"
        ref="selection"
        @on-selection-change="tdSelect"
      >
      </Table>
      <Page :total="total"
            v-show="total > 0"
            show-total
            style="margin-top: 10px"
            :page-size="page_size"
            @on-change="pageChange"/>

      <!--S批量提现状态区域-->
      <deposit-all
        v-show="all_deposit.show"
        :success_number="all_deposit.success"
        :error_number="all_deposit.error"
        :total="deposit_list.length">
      </deposit-all>
      <!--E批量提现状态区域-->
    </div>
</template>

<script>
import DepositAll from './components/deposit-all'
export default {
  name: 'deposit',
  data () {
    let self = this
    return {
      // 状态
      status: 0,
      // 状态选项
      status_options: [
        {
          value: 0,
          label: '等待提现'
        },
        {
          value: 1,
          label: '提现完成'
        },
        {
          value: 2,
          label: '提现失败'
        }
      ],
      // 表单头
      th: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户id',
          key: 'uid'
        },
        {
          title: '昵称',
          key: 'nickname',
          render: (h, params) => {
            return h('span', params.row.user.nickname)
          }
        },
        {
          title: '头像',
          key: 'avatar',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.user.avatar
              },
              style: {
                display: 'block',
                width: '40px',
                height: '40px'
              }
            })
          }
        },
        {
          title: '提现金额',
          key: 'money',
          render: (h, params) => {
            return h('span', params.row.money + '元')
          }
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            return h('span', self.statusToStr(params.row.status))
          }
        },
        {
          title: '申请时间',
          key: 'time'
        },
        {
          title: '操作',
          key: 'handle',
          render: (h, params) => {
            return h('div', this.handleButtons(h, params))
          }
        }
      ],
      // 数据
      td: [],
      // 当前页面
      page: 1,
      // 数据总数
      total: 0,
      // 每页数据数量
      page_size: 10,
      // 批量提现数据
      deposit_list: [],
      // 批量提现
      all_deposit: {
        show: false,
        success: 0,
        error: 0
      }
    }
  },
  components: {
    DepositAll
  },
  mounted () {
    this.getList()
    this.getTotal()
  },
  methods: {
    /**
     * 获取提现列表
     */
    getList () {
      this.$get('deposit/getList', {
        limit: [(this.page - 1) * this.page_size, this.page_size],
        status: this.status
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.td = data
          } else {
            this.td = []
          }
        })
    },
    getTotal () {
      this.$get('deposit/getTotal', {
        status: this.status
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.total = parseInt(data)
          }
        })
    },
    /**
     * 状态转化文字
     */
    statusToStr (status) {
      if (status === '0') {
        return '待提现'
      } else if (status === '1') {
        return '成功'
      } else {
        return '失败'
      }
    },
    /**
     * 操作按钮
     */
    handleButtons (h, param) {
      let data = []
      let status = param.row.status
      if (status === '0') {
        data = [
          h('Button', {
            props: {
              type: 'primary',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.$Modal.confirm({
                  title: '提示',
                  content: '提现金额将直接到账用户微信钱包',
                  onOk: () => {
                    this.deposit(param.row.id)
                      .then((res) => {
                        if (res === true) {
                          this.getList()
                          this.getTotal()
                          this.$Message.success({ content: '提现成功' })
                        } else {
                          this.$Message.error({ content: res.err_msg })
                        }
                      })
                  }
                })
              }
            }
          }, '提现'),
          h('Button', {
            props: {
              type: 'error',
              size: 'small'
            },
            on: {
              click: () => {
                this.$Modal.confirm({
                  title: '提示',
                  content: '提现金额将返回给用户余额，确定拒绝此提现吗？',
                  onOk: () => {
                    this.refuse(param.row.id)
                  }
                })
              }
            }
          }, '拒绝')
        ]
      }
      return data
    },
    /**
     * 类型切换
     */
    selectChange (status) {
      if (status === 0) {
        if (this.th[this.th.length - 1].key === 'time') {
          this.th.unshift({
            type: 'selection',
            width: 60,
            align: 'center'
          })
          this.th.push({
            title: '操作',
            render: (h, params) => {
              return h('div', this.handleButtons(h, params))
            }
          })
        }
      } else {
        if (this.th[this.th.length - 1].key === 'handle') {
          this.th.pop()
          this.th.shift()
        }
      }
      this.status = status
      this.deposit_list = []
      this.page = 1
      this.getList()
      this.getTotal()
    },
    /**
     * 页面切换
     */
    pageChange (page) {
      this.deposit_list = []
      this.page = page
      this.getList()
      this.getTotal()
    },
    /**
     * 选择选项，批量选择
     */
    tdSelect (deposit_list) {
      this.deposit_list = deposit_list
    },
    /**
     * 批量提现
     */
    depositAll () {
      if (this.deposit_list.length <= 0) {
        this.$Message.error('至少选择一个提现申请')
        return false
      }
      this.all_deposit.success = 0
      this.all_deposit.error = 0
      this.$Modal.confirm({
        title: '提示',
        content: '确定处理批量提现吗？',
        onOk: () => {
          this.all_deposit.show = true
          this.deposit_list.forEach((item, index) => {
            return this.deposit(item.id)
              .then((res) => {
                if (res === true) {
                  this.all_deposit.success++
                } else {
                  this.all_deposit.error++
                }
                if (index >= this.deposit_list.length - 1) {
                  setTimeout(() => {
                    this.all_deposit.show = false
                    this.getList()
                    this.getTotal()
                  }, 3000)
                }
              })
          })
        }
      })
    },
    /**
     * 提现
     * @param deposit_id
     * @returns {PromiseLike<any> | Promise<any>}
     */
    deposit (deposit_id) {
      return new Promise((resolve) => {
        this.$post('deposit/manageDeposit', {
          deposit_id
        })
          .then((res) => {
            let { code, err_msg } = res.data
            if (code === 0) {
              resolve(true)
            } else {
              resolve({ code, err_msg })
            }
          })
      })
    },
    /**
     * 拒绝提现
     */
    refuse (deposit_id) {
      this.$post('deposit/refuse', {
        deposit_id
      })
        .then((res) => {
          let { code } = res.data
          if (code === 0) {
            this.getList()
            this.getTotal()
            this.$Message.success({ content: '操作成功' })
          } else {
            this.$Message.error({ content: '操作失败' })
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
  .deposit{
    position: relative;
  }
  #select-status{
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 4px 0 0 10px;
    box-sizing: border-box;
    background: #fff;
    .select-status{
      background: #fff;
      width: 300px;
    }
    .all-deposit-button{
      position: absolute;
      right: 10px;
      top:4px;
    }
  }
</style>
